<template>
  <div class="page">
    <div class="main">
      <div class="doc">
        <vue-office-docx :src="docx" class="docx-vue" />
      </div>
      <div class="chat-wrapper">
        <!-- <vue3-markdown-it :source="source" /> -->
        <div class="chat-content">
          <template v-for="(item, index) in chatListData" :key="index">
            <div v-if="item.type === 'ai'" class="chat-item ai">
              <img src="../assets/ai.png" />
              <div>
                <vue3-markdown-it :source="item.content" class="content" />
                <div class="time">{{ item.time }}</div>
              </div>
            </div>
            <div v-else class="chat-item user">
              <img src="../assets/user.png" />
              <div>
                <div class="content">{{ item.content }}</div>
                <div class="time">{{ item.time }}</div>
              </div>
            </div>
          </template>
        </div>
        <div class="input-wrapper">
          <el-input type="textarea" v-model="inputChat" rows="3" clearable> </el-input>
          <el-button type="primary">发送</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import Vue3MarkdownIt from 'vue3-markdown-it'
import { ref } from 'vue'
const chatListData = ref([
  {
    type: 'ai',
    content: '你好，我是智能助手，有什么可以帮助你的吗？',
    time: '2021-09-01 12:00:00'
  },
  {
    type: 'user',
    content: '你好，我想问一下这个问题',
    time: '2021-09-01 12:00:00'
  },
  {
    type: 'ai',
    content: '这个问题的答案是这样的',
    time: '2021-09-01 12:00:00'
  },
  {
    type: 'user',
    content: '好的，谢谢',
    time: '2021-09-01 12:00:00'
  },
  {
    type: 'ai',
    content: '不客气，有什么其他问题可以帮助你的吗？',
    time: '2021-09-01 12:00:00'
  },
  {
    type: 'user',
    content: '没有了，谢谢',
    time: '2021-09-01 12:00:00'
  },
  {
    type: 'ai',
    content: '好的，再见',
    time: '2021-09-01 12:00:00'
  },
  {
    type: 'user',
    content: '再见',
    time: '2021-09-01 12:00:00'
  },
  {
    type: 'ai',
    content: '再见',
    time: '2021-09-01 12:00:00'
  },
  {
    type: 'user',
    content: '再见',
    time: '2021-09-01 12:00:00'
  }
])
const inputChat = ref('')
const docx = ref('https://static-1252421604.cos.ap-guangzhou.myqcloud.com/vdp.docx')
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #333;
  padding: 0 20px;
  .main {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: flex;
    gap: 20px;
    .doc {
      flex: 3;
      height: 100%;
      background: #fff;
      border-radius: 8px;
      .docx-vue {
        height: 90vh;
        :deep(.docx-wrapper) {
          padding: 0px;
          background: #fff;
          .docx {
            box-shadow: none;
          }
        }
      }
    }
    .chat-wrapper {
      flex: 2;
      background: #fff;
      border-radius: 8px;
      .chat-content {
        height: calc(100% - 150px);
        padding: 20px;
        overflow-y: scroll;
        .chat-item {
          display: flex;
          gap: 10px;
          margin: 10px 0;
          &.ai {
            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
            .content {
              background: #f0f2f5;
              padding: 10px;
              border-radius: 10px;
            }
          }
          &.user {
            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
            .content {
              background: linear-gradient(
                269deg,
                rgb(161, 113, 255) -3.63%,
                rgb(93, 102, 255) 100.38%
              );
              padding: 10px;
              border-radius: 10px;
              color: #fff;
            }
          }
        }
      }
      .input-wrapper {
        width: 100%;
        height: 150px;
        padding: 20px;
        display: flex;
        :deep(.el-textarea) {
          width: 100%;
          height: 100%;
          textarea {
            resize: none;
            height: 100%;
          }
        }
        :deep(.el-button) {
          margin-left: 20px;
          height: 100%;
        }
      }
    }
  }
}
</style>
